import React from "react"
import "./index.scss"
import { Progress, Button } from "antd-mobile"

interface vipProps {
  rootStore?: any
  history?: any
}
function renderCards(arr: any) {
  return arr.map((item: any, index: any) => {
    return (
      <div className="cards" key={index}>
        <div className="cards-top">VIP晋级礼金</div>
        <div className="cards-middle">{item.num}</div>
        <div className="cards-bottom">立即领取</div>
      </div>
    )
  })
}
function renderList(arr: any) {
  return arr.map((item: any, index: any) => {
    return (
      <div className="vip-gradeList-list" key={index}>
        {item.map((insideItem: any, index: any) => {
          return <span key={index}>{insideItem.text}</span>
        })}
      </div>
    )
  })
}
const listArr = [
  [{ text: "福利" }, { text: "当前等级" }, { text: "晋级后等级" }],
  [{ text: "晋级礼金" }, { text: "x" }, { text: "x" }],
  [{ text: "生日礼金" }, { text: "x" }, { text: "x" }],
  [{ text: "每月红包" }, { text: "x" }, { text: "x" }],
  [{ text: "佳节礼品" }, { text: "x" }, { text: "x" }],
  [{ text: "专属活动" }, { text: "x" }, { text: "x" }],
  [{ text: "极速退款" }, { text: "x" }, { text: "x" }]
]
export class Vip extends React.Component<vipProps, {}> {
  state = {
    percent: 0
  }
  render() {
    const { props } = this
    return (
      <div className="App-main-contain">
        <Button type="warning" onClick={() => props.history.goBack()}>
          返回
        </Button>
        <div className="vip-grade">
          <div className="vip-grade-top">VIP等级</div>
          <div className="vip-grade-bottom">
            <div className="show-info">
              <div className="progress">
                <Progress percent={this.state.percent} position="normal" />
              </div>
              <div aria-hidden="true">{this.state.percent}%</div>
            </div>
            <div className="vip-grade-text">
              <p>
                晋级到V1：
                <br />
                还需要存款5.00元且有效投注
                2000元，完成1次提款每日02:00:00计算升级、晋级/保级成功后每天计算降级
              </p>
            </div>
            <div></div>
          </div>
        </div>
        <div className="vip-welfare">
          <div className="vip-welfare-top">
            <div className="vip-welfare-top-text">VIP福利</div>
            <div className="vip-welfare-top-cards">
              {renderCards([{ num: 333 }, { num: 333 }, { num: 333 }])}
            </div>
          </div>
          <div className="vip-gradeList">{renderList(listArr)}</div>
        </div>
      </div>
    )
  }
}
